<template>
  <div class="Messagecontainer">
  <van-cell-group inset>
    <van-field
      v-model="message"
      rows="5"
      autosize
      type="textarea"
      maxlength="200"
      placeholder="请输入留言"
      show-word-limit
    />
  </van-cell-group>
  <div class="from"> 
    <div class="reset" @click="reset">清空</div>
    <div class="submit" @click="submit">提交</div>
  </div>
  <div class="redirect" @click="redirectPage">返回上一页</div>
  <div id="tip1">提示：请说明影片名称和什么播放源不能播放！</div>
  <div id="tip2">没说清楚的没办法排查修复</div>
  <div class="MessageTitle">
    <span class="messageName">留言板</span>
    <span class="messageData">共有{{count}}条数据，当前第{{page}}页</span>
  </div>
  <div class="MessageShow">
    <ul>
      <li v-for="(item,index) in comment" :key="index" v-show="(page-1)*10<=index&&index<page*10">
        <img  src="http://www.mituys.com/static/images/touxiang.png" alt="">
        <div class="right-content">
          <div class="right-message">
            <div>游客</div>
            <div>
              <text class="time">{{item.time}}</text>
              <text class="info">#{{3000 + index}}</text>
            </div>
          </div>
          <div class="content">{{item.content}}</div>
          <div class="reply" v-if="reply.length !==0 ">
            <ul>
              <li>
                <text class="iconfont icon-xiaoxi"></text>
                <text class="pinlun"><text style="color: #ff5f00;"></text></text>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    
  </div>
  <div class="MessagePagition" v-show="count>10">
    <span @click="tofirst">首页</span>
    <span @click="pre">上一页</span>
    <span @click="next">下一页</span>
    <span @click="toend">尾页</span>
  </div>
  <div class="MesPagintionDesc">
    当前<text style="color:#ff5f00;">第{{page}}页</text> / 共有{{Allpage}}页
  </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import {useRouter} from 'vue-router'
import { computed, onMounted } from '@vue/runtime-core'
import {Toast} from 'vant'
import axios from 'axios'
export default {
  setup(){
    const router = useRouter()
    const state = reactive({
      message:'',
      page:1,
      count:0,
      reply:[],
      comment:[]
    })
    let Allpage = computed(()=>{
      return parseInt(state.count/10)+1
    })
    const reset = ()=>{
      state.message ='' 
    }
    const submit = ()=>{
      if (state.content==='') {
        Toast('留言不能为空')
        return
      }
      let day = new Date()
      let time = day.getFullYear() + '-' +(day.getMonth()+1) + '-'+ (day.getDay()+1)+ ' '+ day.getHours()+":"+day.getMinutes()+':'+day.getSeconds()
      console.log(state.message);
      axios.get('/api/message',{
        params:{
          content:state.message,
          time:time
        }
      }).then(res=>{
        console.log(res.data);
        state.comment= res.data
        state.count = res.data.length
      })
    }
    onMounted(()=>{
      axios.get('/api/getmessage').then(res=>{
        console.log(res.data);
        state.comment= res.data
        state.count = res.data.length
      })
    })
    const redirectPage =()=>{
      router.go(-1)
    }
    const toend =()=>{
      state.page = parseInt(state.count/10)+1
    }
    const tofirst = ()=>{
      state.page = 1
    }
    const pre = ()=>{
      if (state.page>1) {
        state.page--
      }else{
        Toast('已经是第一页了')
      }
    }
    const next = ()=>{
      if (state.page<parseInt(state.count/10)+1) {
        state.page++
        
      }else{
        Toast('已经是最后一页了')
      }
    }
    return{
      ...toRefs(state),
      Allpage,
      reset,
      submit,
      redirectPage,
      toend,
      tofirst,
      pre,
      next
    }
  }
}
</script>

<style lang="less">
.Messagecontainer{
  position: fixed;
  top: 0;
  overflow: scroll;
  width: 100%;
  height: 100vh;
  background: #fff;
  .van-cell__value{
    background: #f8f8f8;
  }
  .from{
    display: flex;
    justify-content: space-between;
    text-align: center;
    .reset{
      margin-top: 20px;
      margin-left: 30px;
      background: #C9D0D5;
      line-height: 40px;
      border-radius: 4px;
      display: block;
      width: 100px;
      height: 40px;
      color: #fff;
    }
    .submit{
      border-radius: 4px;
      margin-top: 20px;
      margin-right: 30px;
      display: block;
      width: 100px;
      height: 40px;
      background: #ff5f00;
      line-height: 40px;
      color: #fff;
    }
  }
  .redirect{
    width: 100px;
    position: relative;
    margin: auto;
    text-align: center;
    background: #3CB034;
    color: #fff;
  }
  #tip1{
    position: relative;
    margin: 20px auto;
    color: #fff;
    border-radius: 5px;
    padding: 4px;
    width: 280px;
    background: -webkit-linear-gradient(right top, #ea328f, #5bb7a5);
    text-align: center;
  }
  #tip2{
    position: relative;
    margin: 20px auto;
    color: #fff;
    border-radius: 5px;
    padding: 4px;
    width: 230px;
    background: -webkit-linear-gradient(right top, #ea328f, #5bb7a5);
    text-align: center;
  }
  .MessageTitle{
    display: flex;
    justify-content: space-between;
    .messageName{
      font-size: 18px;
      font-weight: bold;
      margin-left: 10px;
      color: #111;
    }
    .messageData{
      margin-right: 10px;
      color: #666;
      font-size: 13px;
    }
    
  }
  .MessagePagition{
    display: flex;
      justify-content: space-around;
      margin-top: 30px;
      span{
        background: #F8F8F8;
        width: 74px;
        font-size: 14px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
      }
    }
  .MesPagintionDesc{
    font-size: 13px;
    margin-top: 30px;
    text-align: center;
    margin-bottom: 50px;
  }
  .MessageShow{
    ul{
      li{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 20px;
        img{
          margin-left: 10px;
          width: 12%;
          height: 12%;
        }
        .right-content{
          margin-right: 10px;
          width: 80%;
          .right-message{
            display: flex;
            justify-content: space-between;
            margin-left: 20px;
            .time{
              border-right: 2px solid #999;
              padding-right: 7px;
            }
            .info{
              margin-left: 7px;
              color: #ff5f00;
            }
          }
          .content{
            margin-left: 20px;
            margin-right: 10px;
          }
          .reply{
            width: 100%;
            ul{
              li{
                background: #f0f0f0;
                padding: 5px 0;
                display: flex;
                flex-wrap: wrap;
                .icon-xiaoxi{
                  color: #999;
                  margin-left: 10px;
                  font-size: 13px;
                  line-height: 15px;
                }
                .pinlun{
                  font-size: 13px;
                  line-height: 15px;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>